const sizeScale = d3.scaleOrdinal()
  .domain(['apple', 'lemon'])
  .range([50, 25]);
  
const colorScale = d3.scaleOrdinal()
  .domain(['apple', 'lemon'])
  .range(['red', 'green']);

const xPostion = (d, i) => 100 + i * 100;


export const fruitbowl = (selection, props ) => {
  const { fruits, height } = props;
  
  const circles = selection.selectAll('circle')
    .data(fruits, d => d.id);
  
  //enter
  circles
    .enter()
    .append('circle')
      .attr('cx', xPostion)
      .attr('cy', height / 2)
      .attr('r', 0)
      // 此处使用merge可以合并enter和update
      // 需要注意添加时的位置,只有之后的代码才会分别执行
    .merge(circles)
      .attr('fill', d => colorScale(d.type))
    .transition().duration(1000)
      .attr('cx', xPostion)
      .attr('r', d => sizeScale(d.type));
  
  //update操作直接使用本身即可.
  /*
  circles
      .attr('r', d => sizeScale(d.type))
      .attr('fill', d => colorScale(d.type));
  */
      
  //exit
  circles.exit()
    .transition().duration(1000)
    .attr('r', 0)
    .remove();
    
    
    
  const text = selection.selectAll('text')
    .data(fruits);
  
  text
    .enter()
    .append('text')
      .attr('x', xPostion)
      .attr('y', height / 2 + 100)
      .attr('text-anchor', 'middle')
      .attr('font-size', 20)
      // 此处使用merge可以合并enter和update
      // 需要注意添加时的位置,只有之后的代码才会分别执行
    .merge(text)
      .text(d => d.type);
  
  //exit
  text.exit().remove();
}